<template>
	<view class="cenorder">
		<view class="orderHead">
			
		  <!-- 线路 -->
		  <view class="over">待审核</view>
		  <!-- <view class="over">待付款</view>
		  <view class="over">待出团</view>
		  <view class="over">待回团</view>
		  <view class="over">退款中</view>
		  <view class="over">已完成</view> -->

		  <!-- 酒店 -->
		  <!-- <view class="over">待审核</view>
		  <view class="over">待付款</view>
		  <view class="over">待使用</view>
		  <view class="over">退款中</view>
		  <view class="over">已完成</view> -->
		  
		  <!-- 景点 -->
		  <!-- <view class="over">待审核</view>
		  <view class="over">待付款</view>
		  <view class="over">待使用</view>
		  <view class="over">退款中</view>
		  <view class="over">已完成</view> -->
		  
		  <view class="ordernu">
			  <view class="ordernumberwhole">
				  <view class="orderNumber">订单状态：</view>
				  <view class="numberMa">待支付</view>
				  <!-- <view class="numberMa">已支付</view> -->
			  </view>
			  <view class="ordernumberwhole">
				  <view class="orderNumber">订单号：</view>
				  <view class="numberMa">53378897787686667</view>
			  </view>
			  <view class="shouldWhole">
				  <view class="shouldJi">应付金额：</view>
				  <!-- <view class="shouldJi">已付金额：</view> -->
				  <view class="moneyYnm">
					  <text class="moneyOne">￥</text>
					  <text class="moneyTow">800.00</text>
				  </view>
			  </view>
			  
			  <!-- 待付款、待审核 -->
			  <!-- <view class="cancel">
					<view>如您需要变更或取消订单，可直接点击</view>
					<button>取消订单</button>
			  </view> -->
			  
			  <!-- 已支付 ，待评价、退款、售后不显示这行-->
			  <view class="cancel">
					<view>如您需要申请退款，可直接点击</view>
					<button @click="refund">申请退款</button>
			  </view>
			</view>
		</view>
		
		<!-- 酒店入住类型start -->
		<view class="timeModular">
			<view class="timeName">贵州海峡阳光大酒店</view>
			<view class="houseOr">
				<view class="houseFx">房型：</view>
				<view class="houseXz">行政客房</view>
			</view>
			<view class="CheckIin">入住日期：07月12日</view>
			<view class="leave">入住日期：07月13日</view>
			<view class="leave">酒店入住凭证：WFJSF123213</view>
			<view class="Tips">
				<image src="../../../static/images/user/hook.png" mode=""></image>
				<view class="Cozy">
					<view>温馨提示!</view>
					<view>您的订单确认后不可取消变更，请认真核对信息。此订单可开具增值税普通发票，成功入住后6个月内仍可申请补开发票。</view>
				</view>
			</view>
			<view class="reserveRoom">
				<view class="Reserve">预定详情：1间，共一晚</view>
				<view class="Room">房间1，姓名：刘小小</view>
			</view>
			<view class="Contact">
				<view class="Room">联系电话：15180828905</view>
				<view class="Room">邮箱：1344160559@qq.com</view>
			</view>
		</view>
		<!-- 酒店入住类型end -->
		
		<!-- 线路类型start -->
		<!-- <view class="timeModular">
			<view class="timeName">贵阳黔灵山+观山湖+天河潭+黄果树三日游</view>
			<view class="houseOr">
				<view class="houseFx">保险类型：</view>
				<view class="houseXz">国内旅游行保险</view>
			</view>
			<view class="CheckIin">出行日期：07月12日</view>
			<view class="leave">线路凭证：WFJSF123213</view>
			<view class="Tips">
				<image src="../../../static/images/user/hook.png" mode=""></image>
				<view class="Cozy">
					<view>温馨提示!</view>
					<view>您的订单确认后不可取消变更，请认真核对信息。此订单可开具增值税普通发票，成功出团后6个月内仍可申请补开发票。</view>
				</view>
			</view>
			<view class="reserveRoom">
				<view class="Reserve">成人游客1</view>
				<view class="Room">姓名：刘小小</view>
				<view class="Room">联系电话：15180828905</view>
				<view class="Room">身份证号：52232199808147027</view>
			</view>
		</view> -->
		<!-- 线路类型end -->
		
		<!-- 门票类型start -->
		<!-- <view class="timeModular">
			<view class="timeName">贵阳黔灵山+观山湖+天河潭+黄果树三日游</view>
			<view class="houseOr">
				<view class="houseFx">保险类型：</view>
				<view class="houseXz">国内旅游行保险</view>
			</view>
			<view class="CheckIin">出行日期：07月12日</view>
			<view class="leave">门票凭证：WFJSF123213</view>
			<view class="Tips">
				<image src="../../../static/images/user/hook.png" mode=""></image>
				<view class="Cozy">
					<view>温馨提示!</view>
					<view>您的订单确认后不可取消变更，请认真核对信息。此订单可开具增值税普通发票，成功出团后6个月内仍可申请补开发票。</view>
				</view>
			</view>
			<view class="reserveRoom">
				<view class="Reserve">成人游客1</view>
				<view class="Room">姓名：刘小小</view>
				<view class="Room">联系电话：15180828905</view>
				<view class="Room">身份证号：52232199808147027</view>
			</view>
		</view> -->
		<!-- 门票类型end -->
		
		<!-- 占位符 -->
		<view class="zwf"></view>
		
		<!-- 底部 ，底部这里只有待付款的才显示价格，其它状态不显示-->
		
		<!-- 退款、售后 -->
		<!-- <view class="Usegot">
			<input type="button" name="" id="" value="修改退款" disabled="disabled"/>
		</view> -->
		
		<!-- 待回团 -->
		<!-- <view class="Usegot">
			<input type="button" name="" id="" value="回团" disabled="disabled"/>
		</view> -->
		
		<!-- 待出团 -->
		<!-- <view class="Usegot">
			<input type="button" name="" id="" value="出团" disabled="disabled"/>
		</view> -->
		
		<!-- 待付款 -->
		<view class="Submission">
			<view>
				<view class="On-linejg">￥888.00</view>
				<view class="ctnr-linejg">在线支付</view>
			</view>
			<input type="button"  @click="btnabled()" value="立即支付" disabled="disabled"/>
		</view>
		
		<!-- 申请退款 -->
		<!-- <view class="Again">
			<input type="button" name="" id="" value="撤销" disabled="disabled" class="AgainYd"/>
			<input type="button" name="" id="" value="重新提交" disabled="disabled" class="AgainLj"/>
		</view> -->
			<uni-fab
				:pattern="pattern"
				:content="content"
				:horizontal="horizontal"
				:vertical="vertical"
				:direction="direction"
				@trigger="trigger"
			></uni-fab>
		</view>
	</view>
</template>

<script>
	import uniFab from '@/components/uni-fab/uni-fab.vue';
	export default{
		components: {
			uniFab
		},
		data(){
			return{
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'vertical',
				pattern: {
					color: '#333',
					backgroundColor: '#fff',
					selectedColor: '#333',
					buttonColor:"#fff"
				},
				content: [
					{
						iconPath: '../../../../static/images/user/iconname.png',
						selectedIconPath: '../../../../static/images/user/iconname.png',
						text: '名单',
						active: false
					},
					{
						iconPath: '../../../../static/images/user/iconreserveyl.png',
						selectedIconPath: '../../../../static/images/user/iconreserveyl.png',
						text: '预定',
						active: false
					},
					{
						iconPath: '../../../../static/images/user/iconpamenty.png',
						selectedIconPath: '../../../../static/images/user/iconpamenty.png',
						text: '记录',
						active: false
					},
					{
						iconPath: '../../../../static/images/user/icondular.png',
						selectedIconPath: '../../../../static/images/user/icondular.png',
						text: '调价',
						active: false
					},
					{
						iconPath: '../../../../static/images/user/iconation.png',
						selectedIconPath: '../../../../static/images/user/iconation.png',
						text: '出团',
						active: false
					}
				]
			}
		},
		methods:{
			trigger(e) { 
				console.log(e);
				console.log(this.content[e.index]);
				this.content[e.index].active = !e.item.active;
				if (e.index == 0) {
					uni.navigateTo({
						url:'../form/name'
					})
				}
				if (e.index == 1) {
					uni.navigateTo({
						url:'../form/orders'
					})
				} 
				if (e.index == 2) {
					uni.navigateTo({
						url:'../form/record'
					})
				}
				if (e.index == 3) {
					uni.navigateTo({
						url:'../form/modify_price'
					})
				}
				if (e.index == 4) {
					uni.navigateTo({
						url:'../form/tripyl'
					})
				}
				uni.showModal({
					title: '提示',
					content: `您${this.content[e.index].active?'选中了':'取消了'}${e.item.text}`,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			btnabled(){
				uni.navigateTo({
					url:'payment'
				})
			},
			refund(){
				uni.navigateTo({
					url:'refund/refund'
				})
			}
		}
	}
</script>

<style>
	@import "../../../../components/personalcenter/ordhoteder";
	.over{
		font-size: 36upx;
		font-weight: bold;
		width: 100%;
		text-align: center;
		color: #13b1eb;
		margin-top: 10upx;
	}
	.appTim{
		text-align: center;
		margin-top: 10upx;
	}
	.redtim {
	  color: #13b1eb;
	  margin: 0 auto;
	  font-size: 36upx;
	}
</style>
